<template>
  <div class="protocol-info">
    <Title :title="title"></Title>
    <van-cell-group class="info">
      <van-field
        v-model="organization"
        label="机构"
        placeholder="请选择机构"
        is-link=""
        @focus="showOrganizations = true"
      />
      <van-action-sheet
        v-model="showOrganizations"
        :round="false"
        :actions="organizations"
        @select="organizationsSelect"
      ></van-action-sheet>
      <van-field
        v-model="protocol"
        label="协议"
        placeholder="请选择协议"
        is-link=""
        @focus="showProtocol = true"
      />
      <van-action-sheet
        v-model="showProtocol"
        :round="false"
        :actions="protocols"
        @select="protocolSelect"
      ></van-action-sheet>
    </van-cell-group>
    <van-button color="#FF6600" size="large" class="next-btn" @click="next"
      >下一步</van-button
    >
  </div>
</template>

<script>
import Title from '../components/Title'
export default {
  data () {
    return {
      showOrganizations: false,
      showProtocol: false,
      title: '协议信息',
      organization: '',
      protocol: '',
      organizations: [
        { id: 1, name: '机构1' },
        { id: 2, name: '机构2' }
      ],
      protocols: [
        { id: 1, name: '协议1' },
        { id: 2, name: '协议2' }
      ]
    }
  },
  methods: {
    // 机构选择处理
    organizationsSelect (item) {
      this.showOrganizations = false
      this.organization = item.name
    },
    // 协议选择处理
    protocolSelect (item) {
      this.showProtocol = false
      this.protocol = item.name
    },
    // 下一步按钮跳转
    next () {
      this.$router.push('/InsuranceInfo')
    }
  },
  components: {
    Title
  }
}
</script>

<style scope lang="less">
.protocol-info {
  .info {
    margin-top: 20px;
  }
  .next-btn {
    margin-top: 20px;
  }
}
</style>
